<script setup lang="ts">
import { ref } from 'vue'
import { Button, ConfigProvider, Input } from 'antd'
import { createContext, useContext } from 'react'
import { applyPureReactInVue, createCrossingProviderForPureVueInReact } from 'veaury'

// 创建一个React context, 作为测试react hook状态的来源
const ReactTestContext = createContext()
// 将React context的Provider转换为vue组件
const ReactTestContextProviderInVue = applyPureReactInVue(ConfigProvider)
// 创建一个跨技术栈到vue的react hooks和一个对应使用的react provider
const [useHooksInVue, HooksProvider] = createCrossingProviderForPureVueInReact(
  () => {
    return {
      // 将前面创建的React context的值暴露给vue，使用useContext hooks
      reactTestContext: useContext(ReactTestContext),
    }
  },
)

// 将HooksProvider转换为vue组件
const VueMissReact = applyPureReactInVue(HooksProvider)

// 定义一个响应式的状态，用于React context的value
const contextValue = ref(Math.random())

const AntdButton = applyPureReactInVue(Button)
const AntdInput = applyPureReactInVue(Input)
</script>

<template>
  <main>
    <AntdInput placeholder="Basic usage" />
    <AntdButton type="primary">
      antd button
    </AntdButton>
  </main>
</template>
